<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>商家列表</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="./css/merchant.css">
	</head>

	<body>
		<div id="uniocn">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">全部</li>
					<li>待使用</li>
					<li>待评价</li>
					<li>已完成</li>
					<li>已过期</li>
					<li>已取消</li>
					<li>待退款</li>
					<li>已退款</li>
				</ul>
			</div>

			<div class="search-box">
				<form class="layui-form" action="##">
					<form class="layui-form">
						<div style="display: flex;justify-content: space-between;">
							<div>
								<div class="layui-input-inline" style="width: 150px;font-size: 14px;">
									<select name="interest" lay-filter="aihao">
										<option value="" selected="">关键字类型</option>
										<option value="0">手机号</option>
										<option value="1">会员名称</option>
									</select>
								</div>
								<div class="layui-input-inline" style="width: 200px;font-size: 14px;">
									<input type="text" name="keyword" placeholder="请输入搜索内容" class="layui-input" style="font-size: 14px;">
								</div>

								<div class="layui-input-inline">
									<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
								</div>
							</div>
							<button style="background: #1E9FFF;" class="layui-btn"><i class="layui-icon">&#xe601;</i> 导出订单</button>
						</div>
					</form>
				</form>
			</div>

			<div style="box-sizing: border-box;padding:15px;background: #fff;margin-top: 15px">
				<table class="layui-table">
					<tr>
						<th style="text-align: center;" class="id">序号</th>
						<th style="text-align: center;" class="name">商品</th>
						<th style="text-align: center;" class="category">单价/数量</th>
						<th style="text-align: center;" class="time">所属商家</th>
						<th style="text-align: center;" class="states">买家</th>
						<th style="text-align: center;" class="states">订单状态</th>
						<th style="text-align: center;" class="states">金额</th>
					</tr>
					<tr v-for="(item,index) in tableList">
						<td style="text-align: center;">{{item.sort}}</td>
						<td style="text-align: center;">{{item.commodity}}</td>
						<td style="text-align: center;">{{item.price}}/{{item.num}}</td>
						<td style="text-align: center;">{{item.merchant}}</td>
						<td style="text-align: center;">{{item.buyer}}</td>
						<td style="text-align: center;">{{item.OrderStatus}}</td>
						<td style="text-align: center;">{{item.sum}}</td>
					</tr>
					<tr v-if="tableList.length<=0">
						<td colspan="8" style="text-align: center;color: #999;">暂无数据...</td>
					</tr>
				</table>
				<div class="tabBox">
					<div id="businessPage"></div>
				</div>
			</div>
		</div>
		<script src="layui/layui.js"></script>
		<script src="./js/jquery-3.2.1.min.js"></script>
		<script src="./js/vue2.5.16.js"></script>
		<script>
			layui.use(['laypage', 'layer', 'element', 'form'], function() {
				var layer = layui.layer,
					laypage = layui.laypage,
					form = layui.form;
				//执行一个laypage实例
				laypage.render({
					elem: 'businessPage', //注意，这里的 test1 是 ID，不用加 # 号
					count: 50 //数据总数，从服务端得到
				});
			});

			new Vue({
				el: "#uniocn",
				data: {
					tableList: [{
						sort: "001",
						commodity: "测试",
						price: "10.00",
						num: "1",
						merchant: "测试",
						buyer: "测试",
						OrderStatus: "测试",
						sum: "10.00"
					}, {
						sort: "001",
						commodity: "测试",
						price: "10.00",
						num: "1",
						merchant: "测试",
						buyer: "测试",
						OrderStatus: "测试",
						sum: "10.00"
					}, {
						sort: "001",
						commodity: "测试",
						price: "10.00",
						num: "1",
						merchant: "测试",
						buyer: "测试",
						OrderStatus: "测试",
						sum: "10.00"
					}],
				},
				methods: {

				}
			})
		</script>
	</body>

</html>